import 'react-native-gesture-handler';
import React from 'react';
import { StatusBar } from 'react-native';
import { TabList } from './Tabs'
import { OrderList } from './order'
import { MineList } from './Mine'
import HooksTest from 'src/pages/Hooks'
import HeaderRightBtn from '@/c/Header/right'
import HeaderLeftBtn from '@/c/Header/left'
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/Entypo';
import { useReduxDevToolsExtension } from '@react-navigation/devtools';
import { useStores } from 'src/store';
import { observer } from 'mobx-react-lite';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator()
const NavigatorList = [...OrderList, ...MineList]
const MyTabs = () => {
  return (
    <Tab.Navigator initialRouteName="Mine" screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        const active = TabList.filter((item) => route.name === item.name)
        return <Icon name={active[0].options.iconName} size={size} color={color}></Icon>
      },
      tabBarActiveTintColor: "#1781b5",
      tabBarInactiveTintColor: '#253d24',
      headerShown: true
    })}>
      {TabList.map((item) => {
        return (<Tab.Screen name={item.name} key={item.name} component={item.component} options={{ title: item.title, headerShown: item.headerShown }} />)
      })}
    </Tab.Navigator>
  )
}
const SafeView = observer(() => {
  const { localStore } = useStores()
  return (
    <Stack.Navigator
      initialRouteName="ButtomC"
      screenOptions={{ headerShown: true, headerLeft: () => <HeaderLeftBtn></HeaderLeftBtn> }}>
      <Stack.Screen name="MyTabs" component={MyTabs} options={{ headerShown: false }}></Stack.Screen>
      {NavigatorList.map((item) => {
        if (item.needLogin && !localStore.token) {
          /**
           * 思路是这样的，如果需要登录 但是没登录渲染的是登录组件
           * 现在要做的是状态的修改
           */
          return <Stack.Screen key={item.name} name={item.name} component={HooksTest} options={{ headerShown: false }}></Stack.Screen>
        } else {
          return (<Stack.Screen key={item.name} name={item.name} component={item.component}
            options={
              {
                title: item.title,
                headerShown: item.options?.headerShown,
                headerRight: () => {
                  if (item.options?.headerRight) return <HeaderRightBtn></HeaderRightBtn>
                },
                headerStyle:item.options?.headerStyle,
                headerTintColor:item.options?.headerTintColor,
              }
            } ></Stack.Screen>)
        }
      })}
    </Stack.Navigator>
  )
})
const Routers = () => {
  // 调试工具
  const navigationRef = useNavigationContainerRef();
  useReduxDevToolsExtension(navigationRef);
  return (
    <SafeAreaProvider>
      <StatusBar barStyle={'light-content'} />
      <NavigationContainer ref={navigationRef}>
        <SafeView></SafeView>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}
export default Routers;
